<!--eslint-disable-->
<template>
    <div class="radar-chart"></div>
</template>
<script>
/* eslint-disable */
import * as echarts from 'echarts';  
export default {
  data() {
    return {
      chart: null,
      currentTooltipIndex: 0,
    };
  },
  mounted() {
    this.chart = echarts.init(this.$el);
    const option = {
      tooltip: {
        show: true,
        trigger: 'item',
        backgroundColor: 'rgba(4, 6, 60, 0.7)', // 背景色，黑色透明
        borderColor: '#4878FF',
        textStyle: {
          color: 'white', // 标签颜色
          fontSize: 14
        },
        // position: function (pos, params, el, elRect, size) {
        //   // 自定义 tooltip 的位置
        //   return [10, 80];
        // }
      },
      radar: {
        shape: 'circle',
        indicator: [
          { name: '北京', max: 100 },
          { name: '天津', max: 100 },
          { name: '辽宁', max: 100 },
          { name: '龙江', max: 100 },
          { name: '蒙东', max: 100 },
          { name: '冀北', max: 100 },
          { name: '四川', max: 100 },
          { name: '重庆', max: 100 },
          { name: '山西', max: 100 },
          { name: '陕西', max: 100 },
          { name: '河南', max: 100 },
          { name: '江苏', max: 100 },
        ],
        center: ['50%', '50%'], // 中心位置
        radius: '70%', // 半径
        splitNumber: 8, // 分割段数
        startAngle: 90, // 起始角度
        // name: '雷达图示例', // 名称
        // nameGap: 10, // 名称距离
        splitArea: {
          show: false, // 显示分隔区域
          areaStyle: {
            color: ['rgba(255, 0, 0, 0.3)', 'rgba(0, 255, 0, 0.3)'], // 分隔区域颜色
          },
        },
        splitLine: {
          show: true, // 显示分隔线
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)', // 分隔线颜色
            width: 1, // 分隔线宽度
          },
        },
        axisLine: {
          show: true, // 显示雷达轴线
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.7)', // 雷达轴线颜色
            width: 1, // 雷达轴线宽度
          },
        }
      },
        series: [
        {
          type: 'radar',
          symbol: 'none', // 不显示数据点
          symbolSize: 0,  // 数据点大小设置为0，确保不显示
          lineStyle: {
            width: 0
          },
          data: [
            {
              name: '现金交费',
              value: [90, 80, 70, 60, 50,90, 80, 70, 60, 50,33,21],
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(230,243,128,0.6)' },
                  { offset: 1, color: 'rgba(247,194,38,1)' },
                ]),
              },
            },
            {
              name: '刷卡交费',
              value: [60, 70, 80, 90, 100,34,9,90, 80, 70, 60, 50],
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(250,157,236,0.6)' },
                  { offset: 1, color: 'rgba(243,100,212,1)' },
                ]),
              },
            },
            {
              name: '扫码交费',
              value: [70, 60,90, 80, 70, 60, 50,12,77, 50, 40, 30],
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(136,243,226,1)' },
                  { offset: 1, color: 'rgba(80,227,194,0.6)' },
                ]),
              },
            },
          ],
        },
      ],
    };
  
      this.chart.setOption(option);
      // 设置定时器，每隔3秒切换 tooltip
    // this.tooltipTimer = setInterval(() => {
    //   this.currentTooltipIndex = (this.currentTooltipIndex + 1) % option.series[0].data.length;
    //   this.chart.dispatchAction({
    //     type: 'showTip',
    //     seriesIndex: 0,
    //     dataIndex: this.currentTooltipIndex,
    //   });
    // }, 3000);
     
    },
    beforeDestroy() {
      if (this.chart) {
        this.chart.dispose();
      }
    },
    methods: {
      
    }
  };
  </script>
  
  <style scoped>
  .radar-chart {
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    width: 100%;
    height: calc(100% - 45px);
  }
  </style>
  